<template>
  <div class="table-box">
    <ProTable :columns="columns" ref="proRef" :pagination="false" :requestApi="getGroups">
      <template #tableHeader>
        <el-button type="primary" @click="opera(undefined)">创建分组</el-button>
        <el-button type="danger">批量删除</el-button>
      </template>
      <template #create_time="{ row }">
        {{ dayjs(row.create_time).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <template #preview="{ row }">
        <span class="px-3px" :style="{ border: `1px solid ${row.borderColor}`, color: row.textColor }">{{ row.name }}</span>
      </template>
      <template #opera="{ row }">
        <el-button link :icon="Edit" @click="opera(row)">编辑</el-button>
        <el-button link :icon="Delete">删除</el-button>
      </template>
    </ProTable>
    <group-drawer ref="groupRef"></group-drawer>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import GroupDrawer from "../components/groupDrawer.vue";
import { ref } from "vue";
import { createGroup, editGroup, getGroups } from "@/api/modules/active";
import { Edit, Delete } from "@element-plus/icons-vue";
import dayjs from "dayjs";

const proRef = ref<InstanceType<typeof ProTable> | null>();

const columns: ColumnProps[] = [
  { type: "index", label: "#", width: 50 },
  { prop: "sort", label: "排序值" },
  { prop: "name", label: "分组名称" },
  { prop: "create_time", label: "创建时间" },
  { prop: "preview", label: "预览" },
  { prop: "opera", label: "操作" }
];

const groupRef = ref<InstanceType<typeof GroupDrawer> | null>();

const opera = (row: any) => {
  if (!row) {
    const params: any = {
      row: { name: "", sort: 100, borderColor: "#AFDCDC", textColor: "#AFDCDC" },
      api: createGroup,
      getTable: proRef.value?.getTableList
    };
    groupRef.value?.acceptParams(params);
  } else {
    const params: any = {
      row,
      api: editGroup,
      getTable: proRef.value?.getTableList
    };
    groupRef.value?.acceptParams(params);
  }
};
</script>

<style></style>
